<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>信息列表</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="text-app" v-cloak>
			<header-app></header-app>
			<div class="ban1-a1">
				<div class="ban1-a2 i100">
					<img
						src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220728/a2e5bb4bc4c958c59f577038cf4db756.jpg">
					<img
						src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220728/a78d6372ad7bb8346466d31dbf933983.jpg">
				</div>
				<div class="ban1-a3 wow fadeInUp animated" data-wow-delay="0.3s" data-wow-duration="1.5s"
					style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.3s; animation-name: fadeInUp;">
					马迭尔业态</div>
				<div class="ban1-a4 wow fadeInUp animated" data-wow-delay="0.4s" data-wow-duration="1.5s"
					style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.4s; animation-name: fadeInUp;">
				</div>
				<div class="ban1-a5 wow fadeInUp animated" data-wow-delay="0.5s" data-wow-duration="1.5s"
					style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.5s; animation-name: fadeInUp;">
					Product series</div>
			</div>
			<!-- 招商加盟 -->
			<div class="ind4-a1">
				<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/b903f287c907377876556f80afff454d.jpg">
				<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/c217089074b7c54c8f20d777ee2858a4.jpg">
			</div>
			<div class="ind4-b1">
				<div class="t1-a1">
					<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg"></div>
					<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s">招商加盟</div>
					<div class="t1-a4 wow fadeInUp" data-wow-delay="0.5s">做中国贵族食品的第一品牌</div>
				</div>
				<div class="ind4-b2 wow fadeInUp" data-wow-delay="0.3s">
					<div class="swiper-container ind411">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item,index) in textList">
								<div class="ind4-b3 clear">
									<div class="ind4-b4 i100">
										<img :src="item.bg_img"></div>
									<div class="ind4-b5">
										<div>
											<div>
												<div class="ind4-b6">{{ item.title }}</div>
												<div class="ind4-b7">{{ item.sTitle }}</div>
												<div class="ind4-b8" v-html="item.intro"></div>
												<div class="bt1-b1 a1 clear">
													<div></div>
													<div>read more</div></a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination ind412"></div>
				<div class="swiper-button-prev ind413 ind415">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/e57736e1fb4ee0a96b19b0a641e4210e.jpg">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/532affbc28e78a66850ef6909226f912.jpg">
				</div>
				<div class="swiper-button-next ind414 ind415">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/c7566043714492688de41e3cd83cd3ce.jpg">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/3bb3bed456e9c0e8159e264cbf31296d.jpg">
					</div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let textList = Vue.ref([])  // 信息列表
					// 招商加盟
					const getTextList = () => {
						requestData('text', {
							page: 1,
							limit: 10,
							sort: 'sortAsc',
							category_id: '635353fb16cdb1829c047d0f'
						}, (res) => {
							// console.log(res)
							textList.value = res.data
						})
					}
					Vue.onBeforeMount(() => {
						getTextList()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						
					})
					// 监听事件   监听textList
					Vue.watch(textList, () => {
						Vue.nextTick(() => {
							// 元素渲染完成执行swiper初始化
							super8('ind411', 'ind412', 'ind413', 'ind414', 5000, 800);
						})
					})
					return { textList }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#text-app')
		</script>
	</body>
</html>
